/**
 * Created by IzayoiH on 2017/3/19.
 */
/**
 * aqiData，存储用户输入的空气指数数据
 * 示例格式：
 * aqiData = {
 *    "北京": 90,
 *    "上海": 40
 * };
 */

var aqiData = {};
function $(id){
    return document.getElementById(id);
}
function addAqiData() {
    var strCity = $("aqi-city-input").value.trim();
    var strAqi = $("aqi-value-input").value.trim();
    if(!strCity.match(/^[A-Za-z\u4e00-\u9FA5]+$/)){
        alert("城市名必须为中英文字符！");
        return;
    }
    if(!strAqi.match(/^\d+$/)){
        alert("空气质量必须为整数！");
        return;
    }
    aqiData[strCity]= strAqi;  //相当于aqiData.strCity=strAqi;
}
/**
 * 渲染aqi-table表格
 */
function renderAqiList() {
    var table=$("aqi-table");
    table.innerHTML="";
    for(var strCity in aqiData){
        if(table.children.length==0){
            table.innerHTML="<tr><th>城市</th><th>空气指数</th><th>操作</th></tr>";
        }
        var tr = document.createElement("tr");
        var td1 = document.createElement("td");
        td1.innerHTML = strCity;
        tr.appendChild(td1);
        var td2 = document.createElement("td");
        td2.innerHTML = aqiData[strCity];
        tr.appendChild(td2);
        var td3 = document.createElement("td");
        td3.innerHTML = "<button class='del-btn'>删除</button>";
        tr.appendChild(td3);
        table.appendChild(tr);
    }
}

/**
 * 点击add-btn时的处理逻辑
 * 获取用户输入，更新数据，并进行页面呈现的更新
 */
function addBtnHandle() {
    addAqiData();
    renderAqiList();
}
/**
 * 点击各个删除按钮的时候的处理逻辑
 * 获取哪个城市数据被删，删除数据，更新表格显示
 */
function delBtnHandle(target) {
    var tr = target.parentElement.parentElement;
    var srtCity = tr.children[0].innerHTML;
    delete aqiData[srtCity];
    renderAqiList();
}

function init() {
    // 在这下面给add-btn绑定一个点击事件，点击时触发addBtnHandle函数
    var btnAdd = $("add-btn");
    btnAdd.onclick=function(){
        addBtnHandle();
    };
    btnAdd.onkeyup=function(event){
        if(event.keyCode==13){
            addBtnHandle();
        }
    };
    // 想办法给aqi-table中的所有删除按钮绑定事件，触发delBtnHandle函数
    var table = $("aqi-table");
    table.addEventListener("click",function(e){
        if(e.target && e.target.nodeName === "BUTTON"){
            delBtnHandle(e.target);
        }
    });
}
init();
